
import ProForm, { ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import { useUpdateEffect } from '@umijs/hooks';
import { Drawer } from 'antd';
import { Spin} from 'antd';

import { useRef } from 'react';
const SaveForm = (props) => {
  const { modalVisible, onCancel, onSubmit, loading, record } = props;

  const formRef = useRef();

  useUpdateEffect(() => {
    if (modalVisible) {
      // getAgentRootPathRequest.run({ id })
    }
  }, [modalVisible])
  useUpdateEffect(() => {
    // if (record.id) {
    
    // }
  }, [record])


  return (
    <Drawer
      destroyOnClose
      title={record.id ? '修改配置' : '添加配置'}
      open={modalVisible}
      // onCancel={() => onCancel()}
      onClose={() => onCancel()}
      width={600}
      footer={null}
    >
      <Spin tip="正在处理..." spinning={loading}>
        <ProForm
          onFinish={async (value) => {
            const params = value;
            if (record.id) {
              params.id = record.id;
            }
            await onSubmit(params);
          }}
          formRef={formRef}
          initialValues={{ ...record }}
        >
          <ProForm.Group>
            <ProFormText
              name="serverName"
              label="服务名称"
              fieldProps={{
                allowClear: true,
              }}
              placeholder="请输入服务名称"
              rules={[{ required: true, message: '请输入服务名称！' }]}
            />

          </ProForm.Group>

          <ProFormTextArea
            name="remark"
            label="备注"
            fieldProps={{
              allowClear: true,
            }}
            placeholder="请输入备注"
            rules={[{ required: false, message: '请输入备注' }]} />
          <ProFormText
            name="rootPath"
            label="服务目录"
            fieldProps={{
              allowClear: true,
              disabled: true
            }}
            placeholder="请选择服务目录"
            rules={[{ required: true, message: '请选择服务目录' }]}
          />
          <div style={{ marginBottom: "12px" }}>选择路径：</div>

        </ProForm>
      </Spin>
    </Drawer>
  );
};

export default SaveForm;
